<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 多种react中程序设计样式 </title>
</head><body></body>
</html>
<script src="">
// 2021-08-10-夜

    //1内联css样式 内联css和常规样式标签相同
       /*
        import React from "react";
        const container = {
            padding:12,
            background: "red"
        }
        const HomePage = e =>{
            return (
                <div style={container}>
                //some ...
                </div>
            )
        }
        export defalut HomePage
       */

    //2样式表 在React中比较常见, 唯一的问题是将样式和另一个组件隔离是非常困难的 
        /*   homepage.css
            .cont{
                width:100%;
                padding:120px;
                background:red;
            }
             import React from "react";
             import "homepage.css";
        const HomePage = e =>{
            return (
                <div className="cont">
                //some ...
                </div>
            )
        }
        export defalut HomePage
        */

    //3 css模块通过未每个类创建唯一的类名来解决样式隔离问题 
         //creact-react-app具有对css模块的内置支持
         //css_module准许我们对文件使用相同的类名，而不必担心css命名冲突 
         /*
         homePage.css   //两个文件的样式会出现相同的命名 不会冲突 
            .cont{
                    width:100%;
                    padding:120px;
                    background:red;
                }
        login.css
            .cont{
                    width:100%;
                    padding:120px;
                    background:red;
                }
        import React from "react";
        import style from "homePage.css"; //导入两个样式文件 
        import from "login.css"
        const HomePage = e =>{
            return (
                <div className={style.cont}>
                //some ...
                </div>
            )
        }
        export defalut HomePage
         */    

      



</script>